<template>
	<view>
		<view class="header">
			<text>购物车</text>
		</view>
		<view v-if="empty">
			<view class="title">
				<text><text class="iconfont icon-lingdang"></text> 单笔订单金额满88元课免邮费</text>
				<text class="iconfont icon-youjiantou" style="padding-top: 6rpx;"></text>
			</view>
			<view class="contentItem">
				<view class="item" v-for="(v,i) in shopcartarr" :key="v.yp_id">
					<view>
						<switch :checked="v.checked" @change="selectchange(i)" type="checkbox" />
					</view>
					<view>
						<image mode="widthFix" :src="IP+v.yp_imgsrc"></image>
					</view>
					<view class="itemRight">
						<view class="itemRightHeader">
							<view>
								<image src="../../static/image/logo.png" mode="widthFix"></image>
							</view>
							<view><text>{{v.yp_mingcheng}}</text></view>
						</view>
						<view class="guige">
							规格：{{v.yaopinguige}}
						</view>
						<view class="itemRightFooter">
							<view>￥{{v.yp_jiage}}</view>
							<view>
								<view @click="jian(i)">-</view>
								<view>
									<input type="text" disabled :value="v.yaopinshuliang" />
								</view>
								<view @click="jia(i)">+</view>
							</view>
						</view>
						<view class="itemChange">
							<text v-if="!footerflag" @click="reselect(i)">重选商品规格</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 测试 -->
			<!-- <view>{{shopcartarr}}</view> -->
			<!-- 站位空白 -->
			<view class="kongbai"></view>
			<view class="footer">
				<view>
					<switch :checked="quanxuan" @change="selectall()" type="checkbox" />
					<text> 全选</text>
				</view>
				<view class="footerFirst" v-if="footerflag">
					<text>总价：<text>￥{{total}}</text></text>
					<view>
						<text @click="changefooter">编辑</text>
					</view>
					<view>
						<button type="default" @click="jiesuan">去结算</button>
					</view>
				</view>
				<view class="footerChange" v-else>
					<button type="primary" size="mini" @click="shareToggle">分享</button>
					<button type="default" size="mini" @click="shoucang">移动收藏</button>
					<button type="warn" size="mini" @click="dialogToggle('warn')">删除</button>
					<view><text @click="changefooter2">完成</text></view>
				</view>
			</view>
		</view>
		<view class="emptycar" v-else>
			<text class="iconfont icon-xunjianjilu"></text>
			<view>
				<text>购物车空空如也哦</text>
			</view>
			<view>
				<text>去挑选几件喜欢的商品吧</text>
			</view>
			<view>
				<button type="warn" @click="skipShouye">随便逛逛</button>
			</view>
		</view>
		<!-- 药品弹出层 -->
		<view>
			<uni-popup ref="popup" :mask-click="false" safe-area=true type="bottom" background-color="#fff">
				<view class="popupContent">
					<view><text class="iconfont icon-yiquxiao" @click="close"></text></view>
					<view class="popupHeader">
						<view>
							<image :src="IP+tcArr[whichyaopin].yp_imgsrc" mode="widthFix"></image>
						</view>
						<view>
							<text>￥{{tcArr[whichyaopin].yp_jiage}}</text>
							<view>{{tcArr[whichyaopin].yp_kucun}}</view>
						</view>
					</view>
					<view class="popupguige">
						<view>规格</view>
						<view>
							<text :class="tcArr[whichyaopin].yaopinguige=='30粒'?'.textactive':''" @click="selectguige('30粒')">30粒</text>
							<text :class="tcArr[whichyaopin].yaopinguige=='50粒'?'.textactive':''" @click="selectguige('50粒')">50粒</text>
						</view>
					</view>
					<view class="popupshuliang">
						<view>数量</view>
						<view>
							<text class="iconfont icon-jianhao" @click="tccjian(whichyaopin)"></text>
							<input type="text" disabled :value="tcArr[whichyaopin].yaopinshuliang" />
							<text class="iconfont icon-jiahao2" @click="tccjia(whichyaopin)"></text>
						</view>
					</view>
					<view class="popupbtn">
						<button type="warn" @click="OkAndclose">确认</button>
					</view>
				</view>
			</uni-popup>
		</view>
		<!-- 分享弹窗 -->
		<uni-popup ref="share" type="share" @change="change" safeArea backgroundColor="#fff">
			<uni-popup-share @select="select"></uni-popup-share>
		</uni-popup>
		<!-- 提示窗示例 -->
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog :type="msgType" cancelText="关闭" confirmText="确认" title="通知" content="确认删除选中项吗？" @confirm="dialogConfirm"
				@close="dialogClose"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import {
		reactive,
		toRefs,
		computed,
		onMounted
	} from 'vue'
	import {mapState,useStore} from 'vuex'
	import http from '../../utils/http.js';
	import store from '../../store/index.js'
	export default {
		setup() {
			const {state,getters,commit,dispatch} = useStore();
			let data = reactive({
				// 拿到全局ip，用来渲染服务器图片用
				IP:computed(()=>state.IP),
				oldGuige:'',
				oldShuliang:'',
				whichyaopin:0,
				// 弹窗数据
				tcArr:[
					{
						yp_imgsrc:'/uploads/yaopinliebiao/感冒药-999感冒灵.jpg',
						yp_jiage:'25',
						yp_kucun:'充足',
						yaopinguige:'30粒',
						yaopinshuliang:'1'
					}
				],
				empty:true,
				footerflag: true,
				// 全选
				quanxuan:false,
				// 渲染页面数据
				shopcartarr:computed(()=>state.shopcart.shopcartarr),
				// 总价
				total:computed(()=>{
					let totalprice=0
					for (let i = 0; i < data.shopcartarr.length; i++) {
						if(data.shopcartarr[i].checked){
							totalprice+=parseInt(data.shopcartarr[i].yp_jiage)*parseInt(data.shopcartarr[i].yaopinshuliang)
						}
					}
					return totalprice
				}),
				// 商品勾选
				selectchange(e) {
					// console.log('商品勾选' + e)
					let flage=1
					for (let i = 0; i < data.shopcartarr.length; i++) {
						if(e==i){
							data.shopcartarr[i].checked=!data.shopcartarr[i].checked
						}
						if(!data.shopcartarr[i].checked){
							flage=0
						}
					}
					// 判断勾选全选
					if(flage){
						data.quanxuan=true
					}else{
						data.quanxuan=false
					}
				},
				// 重选商品规格，弹出弹出层
				reselect(i) {
					data.whichyaopin=i
					data.oldShuliang=data.shopcartarr[i].yaopinshuliang
					data.oldGuige=data.shopcartarr[data.whichyaopin].yaopinguige
					// console.log('重选商品规格')
					// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
					uni.hideTabBar({
						animation:false
					})
					this.$refs.popup.open('bottom')
				},
				// 关闭弹出层
				close() {
					this.$refs.popup.close()
					uni.showTabBar({
						animation:true
					})
					data.shopcartarr[data.whichyaopin].yaopinguige=data.oldGuige
					data.shopcartarr[data.whichyaopin].yaopinshuliang=data.oldShuliang
					// 从新设置弹出层数据
					data.tcArr=data.shopcartarr
				},
				// 确定后关闭弹出层
				OkAndclose(){
					this.$refs.popup.close()
					uni.showTabBar({
						animation:true
					})
					let sl
					let id
					let whichdd
					if(data.shopcartarr[data.whichyaopin].ptdd_id){
						id=data.shopcartarr[data.whichyaopin].ptdd_id
						whichdd='pt'
					}else if(data.shopcartarr[data.whichyaopin].ypdd_id){
						id=data.shopcartarr[data.whichyaopin].ypdd_id
						whichdd='yp'
					}
					http({
						url:'/restxinxi',
						method:'post',
						data:{
							yaopinshuliang:data.shopcartarr[data.whichyaopin].yaopinshuliang,
							id:id,
							whichdd:whichdd,
							guige:data.shopcartarr[data.whichyaopin].yaopinguige
						}
					}).then((res)=>{
						console.log(res)
						// 从新设置弹出层数据
						data.tcArr=data.shopcartarr
					})
				},
				// 数量减
				jian(index){
					let sl=''
					let id
					if(data.shopcartarr[index].yaopinshuliang>1){
						data.shopcartarr[index].yaopinshuliang--
						sl=data.shopcartarr[index].yaopinshuliang
						// id=data.shopcartarr[index].
						let id
						let whichdd
						// console.log(data.shopcartarr[index].ptdd_id)
						if(data.shopcartarr[index].ptdd_id){
							id=data.shopcartarr[index].ptdd_id
							whichdd='pt'
						}else if(data.shopcartarr[index].ypdd_id){
							id=data.shopcartarr[index].ypdd_id
							whichdd='yp'
						}
						http({
							url:'/restShuliang',
							method:'post',
							data:{
								yaopinshuliang:sl,
								id:id,
								whichdd:whichdd
							}
						}).then((res)=>{
							console.log(res)
							// 从新设置弹出层数据
							data.tcArr=data.shopcartarr
						})
					}
				},
				// 数量加
				jia(index){
					let sl=''
					data.shopcartarr[index].yaopinshuliang++
					sl=data.shopcartarr[index].yaopinshuliang
					let id
					let whichdd
					// console.log(data.shopcartarr[index].ptdd_id)
					if(data.shopcartarr[index].ptdd_id){
						id=data.shopcartarr[index].ptdd_id
						whichdd='pt'
					}else if(data.shopcartarr[index].ypdd_id){
						id=data.shopcartarr[index].ypdd_id
						whichdd='yp'
					}
					http({
						url:'/restShuliang',
						method:'post',
						data:{
							yaopinshuliang:sl,
							id:id,
							whichdd:whichdd
						}
					}).then((res)=>{
						console.log(res.data)
						// 从新设置弹出层数据
						data.tcArr=data.shopcartarr
					})
				},
				// 弹出层的数量减
				tccjian(index){
					if(data.shopcartarr[index].yaopinshuliang>1){
						data.shopcartarr[index].yaopinshuliang--
						// sl=data.shopcartarr[index].yaopinshuliang
						// 从新设置弹出层数据
						data.tcArr=data.shopcartarr
					}
				},
				// 弹出层的数量加
				tccjia(index){
					data.shopcartarr[index].yaopinshuliang++
					// 从新设置弹出层数据
					data.tcArr=data.shopcartarr
				},
				// 弹出层选规格
				selectguige(e){
					// console.log(e)
					data.oldGuige=data.shopcartarr[data.whichyaopin].yaopinguige
					data.shopcartarr[data.whichyaopin].yaopinguige=e
					// 从新设置弹出层数据
					data.tcArr=data.shopcartarr
				},
				// 全选
				selectall() {
					// console.log('全选')
					data.quanxuan=!data.quanxuan
					// console.log(data.quanxuan)
					for (let i = 0; i < data.shopcartarr.length; i++) {
						// console.log(i)
						if(data.quanxuan){
							data.shopcartarr[i].checked=true
						}else{
							data.shopcartarr[i].checked=false
						}
					}
				},
				// 去结算
				jiesuan(){
					// console.log('去结算')
					let flag=0
					for (let i = 0; i < data.shopcartarr.length; i++) {
						if(data.shopcartarr[i].checked){
							flag=1
							break
						}
					}
					if(flag){
						for (let i = 0; i < data.shopcartarr.length; i++) {
							if(data.shopcartarr[i].checked){
								state.shopcart.skipArr.push(data.shopcartarr[i])
							}
						}
						state.shopcart.totalprice=data.total
						// console.log(state.shopcart.skipArr)
						uni.navigateTo({
							url:'/pages/querendingdan/querendingdan'
						})
					}else{
						uni.showToast({
							title: '请先勾选商品',
							duration: 1500,
							icon:'error'
						});
					}
				},
				// 全选一块的按钮切换
				changefooter() {
					data.footerflag = false
				},
				// 全选一块的按钮切换
				changefooter2() {
					data.footerflag = true
				},
				// 随便逛逛
				skipShouye(){
					console.log(12)
				},
				// 分享弹窗
				shareToggle() {
					let flag=0
					for (let i = 0; i < data.shopcartarr.length; i++) {
						if(data.shopcartarr[i].checked){
							flag=1
							break
						}
					}
					if(flag){
						this.$refs.share.open()
					}else{
						uni.showToast({
							title: '请先勾选商品',
							duration: 1500,
							icon:'error'
						});
					}
				},
				// 点击微信，qq等触发的事件
				select(e){
					// console.log(e)
					uni.showToast({
						title: '分享成功',
						duration: 1500,
					});
				},
				// 移动到收藏
				shoucang(){
					let flag=0
					for (let i = 0; i < data.shopcartarr.length; i++) {
						if(data.shopcartarr[i].checked){
							flag=1
							break
						}
					}
					if(flag){
						uni.showToast({
							title: '收藏成功',
							duration: 1500,
						});
					}else{
						uni.showToast({
							title: '请先勾选商品',
							duration: 1500,
							icon:'error'
						});
					}
				},
				// 删除弹框
				dialogToggle(type) {
					let flag=0
					for (let i = 0; i < data.shopcartarr.length; i++) {
						if(data.shopcartarr[i].checked){
							flag=1
							break
						}
					}
					if(flag){
						this.$refs.alertDialog.open()
					}else{
						uni.showToast({
							title: '请先勾选商品',
							duration: 1500,
							icon:'error'
						});
					}
				},
				// 确认删除
				async dialogConfirm() {
					// console.log('点击确认')
					// 每次删除后让弹出层要展示的数据为第一个
					data.whichyaopin=0
					let iserr=0
					let isshanchu=0
					let id
					let whichdd
					for (let i = 0; i < data.shopcartarr.length; i++) {
						if(data.shopcartarr[i].checked){
							if(data.shopcartarr[i].ptdd_id){
								id=data.shopcartarr[i].ptdd_id
								whichdd='pt'
							}else if(data.shopcartarr[i].ypdd_id){
								id=data.shopcartarr[i].ypdd_id
								whichdd='yp'
							}
							await http({
								url:'/deleteshangpin',
								method:'post',
								data:{
									id:id,
									whichdd:whichdd
								}
							}).then((res)=>{
								isshanchu=1
								data.shopcartarr.splice(i,1)
								i--
								// 从新设置弹出层数据
								data.tcArr=data.shopcartarr
							}).catch((err)=>{
								iserr=1
							})
						}
						if(iserr)break
					}
					if(isshanchu==1&&iserr==0){
						uni.showToast({
							title: '删除成功！',
							duration: 1500
						});
						// 数据为空时，切换页面显示的内容
						if(!data.shopcartarr.length)data.empty=false
					}
				},
				dialogClose() {
					console.log('点击关闭')
				},
			})
			onMounted(()=>{
				
			})
			return {
				...toRefs(data)
			}
		},
		onShow(){
			this.$store.state.shopcart.shangpinId=[]
			this.quanxuan=false
			// 模拟用户1的登录
			let id=this.$store.state.userID
			http({
				url:'/getshopcartData',
				method:'post',
				data:{
					id:id
				}
			}).then((res)=>{
				// console.log(res.data)
				if(res.data.data.length){
					res.data.data.forEach((v)=>{
						v.checked=false
					})
					// console.log(res.data.data)
					this.$store.commit('shopcart/getAlldata',res.data.data)
					// console.log(data.shopcartarr[0].yp_guige)
					// 设置弹出层的数据
					this.tcArr=res.data.data
				}else{
					this.empty=false
				}
			}) 
		},
		// computed:{
		// 	...mapState('shopcart',['shopcartarr'])
		// },
		onLoad() {
			
		},
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style lang="scss">
	@import url("~@/static/fonts/iconfont.css");
	.header {
		padding: 20rpx 30rpx;
		border-bottom: 1rpx solid #efefef;
	}
	.title {
		padding: 20rpx 30rpx;
		background-color: #FEFCEC;
		display: flex;
		justify-content: space-between;

		text {
			color: #FF5918;
		}
	}
	.contentItem {
		// padding-bottom: 1rpx;
		background-color: #F2F2F2;
		.item {
			margin-bottom: 15rpx;
		}
	}
	.item {
		background-color: white;
		border-top: 1px solid #F2F2F2;
		border-bottom: 1px solid #F2F2F2;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 30rpx;

		>view:nth-child(1) {
			margin-top: -42rpx;
		}

		>view:nth-child(2) {
			margin-top: -42rpx;
			padding-left: 15rpx;

			image {
				width: 125rpx;
			}
		}
		.itemRight {
			padding: 10rpx 0;
			flex: 1;
			.itemRightHeader {
				padding-left: 20rpx;
				margin-bottom: 15rpx;
				display: flex;
				justify-content: space-between;
				view:nth-child(1) {
					image {
						padding-top: 10rpx;
						width: 25rpx;
					}
				}
				view:nth-child(2) {
					padding-left: 15rpx;
					flex: 1;
				}
			}
			.guige{
				padding-left: 20rpx;
				margin-bottom: 15rpx;
			}
			.itemRightFooter {
				padding-left: 20rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				>view:nth-child(1) {
					flex: 1;
					color: red;
				}
				>view:nth-child(2) {
					display: flex;
					>view:nth-child(1) {
						text-align: center;
						border: 1rpx solid #999999;
						width: 50rpx;
					}
					>view:nth-child(3) {
						text-align: center;
						border: 1rpx solid #999999;
						width: 50rpx;
					}
					>view:nth-child(2) {
						input {
							text-align: center;
							margin: 0 10rpx;
							border: 1rpx solid #999999;
							width: 70rpx;
						}
					}
				}
			}
			.itemChange {
				height: 42rpx;
				text-align: end;
				text {
					font-size: 13px;
					color: red;
				}
			}
		}
	}
	.footer {
		z-index: 99;
		width: 100%;
		box-sizing: border-box;
		border-top: 1rpx solid #efefef;
		background-color: white;
		// padding: 20rpx 0rpx;
		padding-left: 30rpx;
		position: fixed;
		bottom: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		>view:nth-of-type(1) {
			display: flex;
			align-items: center;
			text {
				color: #a8a8a8;
			}
		}
		>.footerFirst {
			flex: 1;
			padding-left: 25rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			>text {
				color: #a8a8a8;
				text {
					color: red;
				}
			}
			>view:nth-of-type(1) {
				text {
					cursor: pointer;
					color: red;
				}
			}
			>view:nth-of-type(2) {
				width: 200rpx;
				button {
					height: 98rpx;
					line-height: 98rpx;
					color: white;
					background-color: red;
					border: 1rpx solid red;
					border-radius: 0;
					font-size: 13px;
				}
			}
		}
		>.footerChange {
			flex: 1;
			padding-left: 25rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			button {
				margin: 20rpx 0;
				color: #a8a8a8;
				background-color: white;
			}
			button:nth-of-type(3) {
				color: red;
				background-color: white;
			}
			button:nth-of-type(3)::after {
				border: 1px solid rgba(255, 0, 0);
			}
			view {
				margin-right: 20rpx;
				color: red;
				cursor: pointer;
			}
		}
	}
	.emptycar{
		text-align: center;
		padding-top: 30rpx;
		.icon-xunjianjilu{
			font-size: 200rpx;
		}
		text{
			color: #B3B3B3;
		}
		view:nth-of-type(1){
			font-size: 40rpx;
			font-weight: 600;
			margin-top: 30rpx;
		}
		view:nth-of-type(2){
			font-size: 40rpx;
			margin-top: 15rpx;
		}
		view:nth-of-type(3){
			margin-top: 140rpx;
			button{
				width: 50%;
			}
		}
	}
	.popupContent{
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		>view:first-child{
			text-align: end;
		}
		.popupHeader{
			display: flex;
			// align-items: center;
			>view:first-child{
				image{
					width: 300rpx;
				}
			}
			>view:nth-of-type(2){
				padding-left: 30rpx;
				margin-top: 50rpx;
				text:first-child{
					color: red;
				}
				view{
					margin-top: 30rpx;
				}
			}
		}
		.popupguige{
			margin: 30rpx 0;
			view{
				margin-top: 20rpx;
				margin-bottom: 60rpx;
			}
			view:nth-of-type(2){
				margin: 20rpx 0;
				text{
					height: 50rpx;
					margin-left: 20rpx;
					padding: 8rpx 15rpx;
					box-sizing: border-box;
					border: 1px solid #999999;
				}
				.textactive{
					color: white;
					background-color: red;
					border: 1px solid red;
				}
			}
		}
		.popupshuliang{
			margin: 30rpx 0;
			view{
				margin-top: 40rpx;
				margin-bottom: 30rpx;
			}
			view:nth-of-type(2){
				display: flex;
				align-items: center;
				input{
					width: 60rpx;
					margin: 0 10rpx;
					text-align: center;
					// border: 1px solid #999999;
				}
				text{
					color: #999999;
				}
				text:first-child{
					margin-left: 20rpx;
				}
			}
		}
	}
	.kongbai {
		height: 102rpx;
		// background-color: red;
	}
</style>
